﻿<template>
  <div>
    <!-- 表格 -->
    <template v-if = "widget.type == 'table'">
      <div class='page_tableContent' v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-table :data = 'widget.tableData' style = 'magrin-bottom:20px;' :style = "{width: widget.options.width}" :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem, tableIndex) in getTableColumns' :key = 'tableIndex' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!-- 树形表格 -->
    <template v-else-if = "widget.type == 'table_expand'">
      <div class='page_tableContent' v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-table :data = 'widget.tableData' style = 'magrin-bottom:20px;' :style = "{width: widget.options.width}" :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
          <!-- 展开的部分 -->
          <el-table-column type = "expand" v-if = '!widget.sub_options.options.isHidden'>
            <template slot-scope = "subTable">
              <div class = 'page_tableContent' style = "padding:10px; min-height:0px">
                <el-table :data = 'subTable.row.subTableData' style = 'width:100%'
                :stripe = 'widget.sub_options.options.stripe' :border = 'widget.sub_options.options.border'>
                  <el-table-column align = 'center' v-for = '(sitem, sindex) in widget.sub_options.tableColumn' :key = 'sindex'
                  :label = 'sitem.text' show-overflow-tooltip>
                    <template slot-scope = 'scope'>
                      <span>{{scope.row[sitem.indexName]}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class = 'page_bottomContent' v-if = 'widget.sub_options.options.showPageInfo'>
                <div class = 'page_paginationContent'>
                  <el-pagination background :current-page = "1" :page-size = '10' :pager-count = "5"
                  :page-sizes = "[10, 25, 50, 100, 500]" layout = "total, sizes, prev, pager, next" :total = '0'></el-pagination>
                </div>
            </div>
            </template>
          </el-table-column>
          <!-- 主表部分 -->
          <el-table-column align = 'center' v-for = '(tableItem, tableIndex) in getTableColumns' :key = 'tableIndex' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!-- 页码 -->
    <template v-else-if = "widget.type == 'pagination'">
      <el-pagination v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden"
      background
      :current-page.sync = "widget.options.currentPage"
      :page-size = 'widget.options.pageSize'
      :pager-count = "5"
      :page-sizes = "[10, 25, 50, 100]"
      layout = "total, sizes, prev, pager, next"
      :total = 'widget.options.totalLength'>
      </el-pagination>
    </template>
    <!-- 按钮 -->
    <template v-else-if = "widget.type == 'button'">
      <div :style = "{'text-align': Object.keys(widget.options).indexOf('textAlign') !== -1 ? widget.options.textAlign : 'left'}"
      v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-button :type = "widget.options.type" :disabled = "widget.options.disabled">{{widget.name}}</el-button>
      </div>
    </template>
    <!-- echarts图表 -->
    <template v-else-if = "widget.type == 'echarts'">
      <div>
        <img v-if = "widget.options.optionType === 'line'" style = 'max-width: 100%' src = 'static/style/common/images/line.png' alt = "">
        <img v-if = "widget.options.optionType === 'pie'" style = 'max-width: 100%' src = 'static/style/common/images/pie.png' alt = "">
        <img v-if = "widget.options.optionType === 'bar'" style = 'max-width: 100%' src = 'static/style/common/images/bar.png' alt = "">
        <img v-if = "widget.options.optionType === 'map'" style = 'max-width: 100%' src = 'static/style/common/images/map.png' alt = "">
      </div>
    </template>
    <!-- 其它的表单元素 -->
    <template v-else>
      <el-form-item :label="(widget.type === 'button' || !widget.options.showLabel) ? '' : widget.name" :prop="widget.model"
      :class = "(widget.type === 'button' || !widget.options.showLabel) ? 'form_noLeftMargin' : ''"
      v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <!-- 单行文本输入框/手机号输入框/固定号码输入框/身份证号码输入框/邮箱输入框/邮政编码/IPv4Input/IPv6Input/MACInput -->
        <template
        v-if = "widget.type == 'EmailInput' || widget.type == 'Input' || widget.type == 'MobileInput' || widget.type == 'TelInput' || widget.type == 'IDInput' || widget.type == 'PostCodeInput' || widget.type == 'IPv4Input' || widget.type == 'IPv6Input' || widget.type == 'MACInput'">
          <el-input v-model = "widget.options.defaultValue" :style = "{width: widget.options.width}" :placeholder = "widget.options.placeholder"
          :clearable = "widget.options.clearable" :disabled = "widget.options.disabled"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false">
            <el-button slot="append"
              v-if = "Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage && widget.options.linkageOption.linkageType === 'eventRender'">
              <i class= 'iconfont icon-zidingyi'></i>
            </el-button>
          </el-input>
        </template>
        <!-- 只读文本输入框 -->
        <template v-if = "widget.type == 'ReadonlyInput'">
          <el-input :style = "{width: widget.options.width}" disabled ></el-input>
        </template>
        <!-- 多行文本 -->
        <template v-if = "widget.type == 'TextArea'">
          <el-input type = "textarea" v-model = "widget.options.defaultValue"
          :style = "{width: widget.options.width}"
          :disabled = "widget.options.disabled"
          :placeholder = "widget.options.placeholder"
          :clearable = "widget.options.clearable"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false"
          ></el-input>
        </template>
        <!-- 下拉框单选 -->
        <template v-if = "widget.type == 'Select'">
          <el-select
          v-model = "widget.options.defaultValue"
          :disabled = "widget.options.disabled"
          :clearable = "widget.options.clearable"
          :placeholder = "widget.options.placeholder"
          :filterable = "widget.options.filterable"
          :style = "{width: widget.options.width}">
            <el-option v-for = "item in widget.options.remoteOptions" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
          </el-select>
        </template>
        <!-- 下拉框多选 -->
        <template v-if = "widget.type == 'MultiSelect'">
          <el-select
          v-model = "widget.options.defaultValue"
          :disabled = "widget.options.disabled"
          multiple collapse-tags
          :clearable = "widget.options.clearable"
          :placeholder = "widget.options.placeholder"
          :filterable = "widget.options.filterable"
          :style = "{width: widget.options.width}">
            <el-option v-for = "item in widget.options.remoteOptions" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
          </el-select>
        </template>
        <!-- 主从表级联单选框 -->
        <template v-if = "widget.type == 'CascadeSelectMS' || widget.type == 'Multi_CascadeSelectMS' || widget.type == 'CascadeSelectTree' || widget.type == 'Multi_CascadeSelectTree'">
          <el-cascader :options = '[]' filterable clearable></el-cascader>
        </template>
        <!-- 单选按钮 -->
        <template v-if = "widget.type == 'RadioButton'">
          <el-radio-group v-model = "widget.options.defaultValue"
          :disabled = "widget.options.disabled" size = "medium">
            <template v-if = 'widget.options.isRadioButton'>
              <el-radio-button v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-radio-button>
            </template>
            <template v-else>
              <el-radio v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-radio>
            </template>
          </el-radio-group>
        </template>
        <!-- 多选按钮 -->
        <template v-if = "widget.type == 'CheckBox'">
          <el-checkbox-group v-model = "widget.options.defaultValue"
          :disabled = "widget.options.disabled" size = "medium">
            <template v-if = 'widget.options.isCheckBoxButton'>
              <el-checkbox-button v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-checkbox-button>
            </template>
            <template v-else>
              <el-checkbox v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-checkbox>
            </template>
          </el-checkbox-group>
        </template>
        <!-- 整数输入框 -->
        <template v-if = "widget.type == 'IntInput'">
          <el-input-number
            v-model = "widget.options.defaultValue"
            :disabled = "widget.options.disabled" :class = "widget.options.controlsShow ? '' : 'inputNumber_noControls'"
            :min = "widget.options.min === null ? -Infinity : widget.options.min" :max = "widget.options.max === null ? Infinity : widget.options.max" :precision = '0'
            :controls-position = "widget.options.controlsPosition" :controls = 'widget.options.controlsShow'
            :style = "{width: widget.options.width}"
          ></el-input-number>
        </template>
        <!-- 小数输入框/货币输入框 -->
        <template v-if = "widget.type == 'DecimalInput' || widget.type == 'Money'">
          <el-input-number
            v-model = "widget.options.defaultValue"
            :disabled = "widget.options.disabled" :class = "widget.options.controlsShow ? '' : 'inputNumber_noControls'"
            :min = "widget.options.min === null ? -Infinity : widget.options.min" :max = "widget.options.max === null ? Infinity : widget.options.max" :precision = "widget.options.precision"
            :controls-position = "widget.options.controlsPosition" :controls = 'widget.options.controlsShow'
            :style = "{width: widget.options.width}"
          ></el-input-number>
        </template>
        <!-- 日历--时间日期格式 -->
        <template v-if = "widget.type == 'Calendar'">
          <el-date-picker type = "datetime"
          v-model = "widget.options.defaultValue"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          value-format='yyyy-MM-dd HH:mm:ss' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--年 -->
        <template v-if = "widget.type == 'CalendarYear'">
          <el-date-picker type = "year"
          v-model = "widget.options.defaultValue"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          :value-format = 'widget.options.format' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--年月 -->
        <template v-if = "widget.type == 'CalendarYearMonth'">
          <el-date-picker type = "month"
          v-model = "widget.options.defaultValue"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          :value-format = 'widget.options.format' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--日期选择器 -->
        <template v-if = "widget.type == 'CalendarDate'">
          <el-date-picker type = "date"
          v-model = "widget.options.defaultValue"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          value-format = 'yyyy-MM-dd' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--时间格式 -->
        <template v-if = "widget.type == 'CalendarTime'">
          <el-time-picker
          v-model = "widget.options.defaultValue"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          value-format = 'HH:mm:ss' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-time-picker>
        </template>
        <!-- 开关 -->
        <template v-if = "widget.type == 'Switch'">
          <el-switch v-model = "widget.options.defaultValue" :disabled = "widget.options.disabled"></el-switch>
        </template>
        <!-- slider -->
        <template v-if = "widget.type == 'SlideInput'">
          <el-slider v-model = "widget.options.defaultValue" :disabled = "widget.options.disabled"
          :min = 'widget.options.min' :max = 'widget.options.max'></el-slider>
        </template>
        <!-- rate -->
        <template v-if = "widget.type == 'StarRate'">
          <el-rate v-model = "widget.options.defaultValue"  :disabled = "widget.options.disabled"
          :show-text = "widget.options.showText" :allow-half = "widget.options.allowHalf"
          :show-score = "widget.options.showScore"
          :texts = "widget.options.texts"
          :void-icon-class = "widget.options.voidIcon"
          :icon-classes = "widget.options.iconClasses"></el-rate>
        </template>
        <!-- 单个文件/多个文件 -->
        <template v-if = "widget.type == 'File' || widget.type == 'Files' || widget.type == 'Video'">
          <el-upload action ='#' disabled drag>
            <i class = "el-icon-upload"></i>
            <div class = "el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <el-upload action ='#' disabled list-type = "picture-card">
          <i class = "el-icon-plus"></i>
        </el-upload>
        </template>
        <!-- 单个图片/多个图片 -->
        <template v-if = "widget.type == 'Picture' || widget.type == 'Pictures'">
          <el-upload action ='#' disabled list-type = "picture-card">
            <i class = "el-icon-plus"></i>
          </el-upload>
        </template>
        <!-- 富文本输入框/地图经纬度/图片位置拾取 -->
        <template v-if = "widget.type == 'MultiPop' || widget.type == 'Pop' || widget.type == 'JSONEditor' || widget.type == 'MD' || widget.type == 'RichText' || widget.type == 'MapXY' || widget.type == 'PicXY' || widget.type == 'GIS_Draw_Line'">
          <el-input v-model = "widget.options.defaultValue" placeholder = '点击输入内容'
          :disabled = 'widget.options.disabled'></el-input>
        </template>
      </el-form-item>
    </template>
  </div>
</template>

<script>
export default {
  props: ['widget', 'models', 'rules'],
  data () {
    return {
      dataModel: this.models[this.widget.model],
      showOrHide: ''
    }
  },
  computed: {
    getTableColumns: function () {
      let currentTableColumns = []
      if (this.widget.type === 'table' && this.widget.tableColumn.length) {
        this.widget.tableColumn.forEach(item => {
          if (item.isShow) {
            this.$set(currentTableColumns, currentTableColumns.length, item)
          }
        })
      }
      if (currentTableColumns.length) {
        return currentTableColumns.sort(this.orderByObjAttr('sortNum'))
      } else {
        return []
      }
    }
  },
  methods: {
    // 对象数组排序
    orderByObjAttr (key) {
      return function (val1, val2) {
        return val1[key] - val2[key]
      }
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler (val) {
        this.models[this.widget.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
      }
    },
    models: {
      deep: true,
      handler (val) {
        this.dataModel = val[this.widget.model]
      }
    }
  }
}
</script>
